<style lang="scss" scoped>
.app-container{
  height: calc(100vh - 85px);
  width: 100%;
  padding: 0;
  display: flex;
  flex-flow: row;
}

  .container-left{
    height: 100%;
    width: 240px;
    padding: 10px;
    border-right: 1px solid #DEDEDE;
    box-sizing: border-box;
    .user_box{
      height: calc(100% - 40px);
      overflow: auto;
      margin-top: 10px;
    }
    .user_item{
      color: #333333;
      font-weight: bold;
      font-size: 17px;
      padding: 15px;
      border-bottom: solid 1px #eeeeee;
      cursor: pointer;
      &:first-child{
        border-top: solid 1px #eeeeee;
      }
    }
    .user_item_chose{
      background-color: #1890ff;
      color: #FFFFFF;
    }
  }
  .container-right{
    flex: 1;
    display: flex;
    flex-flow: column;
    align-content: center;
  }
  .container-top {
    width: 100%;
    height: 55px;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: solid 1px #DEDEDE;
    .menu-tabs {
      display: flex;
      flex-flow: row;
      align-items: center;
      .menu-tabs-item {
        cursor: pointer;
        display: inline-block;
        width: 100px;
        height: 30px;
        border-radius: 15px 15px 15px 15px;
        text-align: center;
        line-height: 30px;
        margin-left: 10px;
        font-size: 16px;
        float: left;
      }
    }
  }
  .container-center {
    height: calc(100% - 55px);
  }
  .search-button {
    height: 30px;
  }
  .goods-panel {
    display: flex;
  }

</style>
<template>
  <div class="app-container">
    <div class="container-left">
      <el-input v-model="searchCustomerName"  placeholder="搜索用户" style="width: 140px;font-size: 17px"  ref="searchCustomerName" @clear="closeUser" @keyup.enter.native="searchKeyUp" @input="getUserList" >
      </el-input>
      <el-button @click="closeUser" style="width: 60px;padding: 10px 0;margin-left: 10px" type="warning" icon="el-icon-close">清空</el-button>
      <div class="user_box">
        <template v-for="item in userList">
          <div class="user_item" :class="{'user_item_chose':currentUser===item.userId }" @click="currentUser=item.userId" >
            {{item.nickName}}
          </div>
        </template>
      </div>
    </div>
    <div class="container-right">
      <div class="container-top">
        <div class="menu-tabs">
          <span class="menu-tabs-item"
                @click="changeTab('buffet')"
                :style="{ color: tabValue === 'buffet' ? '#fff' : '#000', backgroundColor: tabValue === 'buffet' ? '#1E90FF' : '#fff',}"
          >自助点餐</span>
          <span class="menu-tabs-item"
                @click="changeTab('normal')"
                :style="{ color: tabValue === 'normal' ? '#fff' : '#000', backgroundColor: tabValue === 'normal' ? '#1E90FF' : '#fff',}"
          >菜单点餐</span>
          <span class="menu-tabs-item"
                @click="changeTab('replace')"
                :style="{ color: tabValue === 'replace' ? '#fff' : '#000', backgroundColor: tabValue === 'replace' ? '#1E90FF' : '#fff',}"
          >代购点餐</span>
          <div style="margin-left: 40px" v-if="tabValue==='normal'">
            <span style="font-size: 14px">菜品类型：</span>
            <el-select v-model="searchForm.type" placeholder="请选择菜品类型" clearable style="width: 200px" @change="searchGoods" @clear="searchGoods" >
              <el-option v-for="(item, index) in dict.type.hotpc_status" :key="index" :label="item.label"
                         :value="item.value" ></el-option>
            </el-select>
            <span style="margin-left: 5px">共计：{{totalFood}}个</span>
          </div>
          <div style="margin-left: 40px" v-if="tabValue==='replace'">
            <span style="font-size: 14px">食材类型：</span>
            <el-select v-model="searchForm.type" placeholder="请选择食材类型" clearable style="width: 200px" @change="searchGoods" @clear="searchGoods" >
              <el-option v-for="(item, index) in dict.type.food_type" :key="index" :label="item.label"
                         :value="item.value" ></el-option>
            </el-select>
            <span style="margin-left: 5px">共计：{{totalFood}}个</span>
          </div>
        </div>
        <div>
          <el-input v-model="searchForm.name" style="width: 200px;margin: 0 10px" placeholder="请输入菜品名称" v-if="tabValue!=='buffet'" clearable @clear="searchGoods">
          </el-input>
          <el-button @click="searchGoods" v-if="tabValue!=='buffet'">搜索</el-button>
        </div>
      </div>
      <div class="container-center">
        <template v-if="tabValue === 'buffet'" >
          <buffet :current-user="currentUser" @closeUser="closeUser"></buffet>
        </template>
        <template v-if="tabValue === 'normal'" >
          <normal ref="normal" :current-user="currentUser" :order-type="tabValue" @closeUser="closeUser" @dishTotal="dishTotal"></normal>
        </template>
        <template v-if="tabValue === 'replace'">
          <replace ref="replace" :current-user="currentUser" :order-type="tabValue" @closeUser="closeUser" @dishTotal="dishTotal"></replace>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import Buffet from "@/views/shop/components/buffet.vue";
import Normal from "@/views/shop/components/normal.vue";
import {listUser} from "@/api/system/user";
import {getDicts} from "@/api/system/dict/data";
import Replace from "@/views/shop/components/replace.vue";
export default {
  components: {Replace, Normal, Buffet},
  dicts:['hotpc_status','food_type'],
  data() {
    return {
      tabValue: "buffet",
      goodsList: [],
      buffetType: "早餐",
      searchForm:{
        name: "",
        type:'',
      },
      searchCustomerName: "",
      total: 0,
      currentUser:null,
      userList:[],
      hotOptions:[],
      totalFood:0,
    }
  },
  created () {
    // this.getlistTodayMorning()
    // this.getlistTodayEvening()
    // this.getbalanceToday()
    // this.getresourceAll()
    this.getUserList()
    this.getDictData()
  },
  mounted() {
    this.$refs.searchCustomerName.focus()

  },
  methods: {
    //菜单查询
    searchGoods(){
      this.$refs[this.tabValue].searchGoods(this.searchForm)
      // this.$refs.normal.searchGoods(this.searchForm)
    },
    dishTotal(data){
      this.totalFood=data
    },
    //按下回车
    searchKeyUp(){
      this.$refs.searchCustomerName.blur()
      this.getUserList()
    },
    //取消用户
    closeUser(){
      this.currentUser=null
      this.searchCustomerName=''
      this.getUserList()
      this.$refs.searchCustomerName.focus()
    },
    changeTab(value) {
      this.tabValue = value;
      this.searchForm={
        name: "",
        type:'',
      }
    },
    changeBuffetTab(value) {
      this.buffetType = value;
    },
    getUserList(){
      // this.closeUser()
      let queryParams={
        pageNum: 1,
        pageSize: 10000,
        nickName: this.searchCustomerName,
      }
      listUser(queryParams).then(res=>{
        this.userList=res.rows
        if(this.searchCustomerName!=='' && this.userList.length>0){
          this.currentUser=this.userList[0].userId
        }
      })
    },
    getDictData(){
      getDicts('hotpc_status').then(res=>{
        this.hotOptions=res.data
      })
    }
  }
}
</script>
